<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<link rel="stylesheet" href="../lib/bootstrap.min.css">
	<link rel="stylesheet" href="../lib/verify.css">
	<link rel="stylesheet" href="../css/main.css">
	<script src="../lib/jquery-3.3.1.js"></script>
	<script src="../js/application.js"></script>
	<script src="../layui/layui.js"></script>
	<script src="../lib/jquery.params.js"></script>
	<script src="../lib/bootstrap.js"></script>
	<script src="../lib/verify.min.js"></script>
</head>

<body>

	<div class="navbar-default" style="height:25px;">
		<div class="container">

		</div>
	</div>

	<div class="container container-small">
		<h1>
			登录 <small>没有账号? <a href="register.html">注册</a></small>
		</h1>
		<form action="">
			<div class="form-group">
				<label for="">用户id/手机</label>
				<input type="userId" class="form-control" id="userId">
			</div>
			<div class="form-group">
				<label for="">密码</label>
				<input type="password" class="form-control" id="password">
			</div>


			<div class="form-group">
				<label>滑动验证</label>
				<div class="input-group-append">
					<div class="Northwest">
						<div class="spjz">
							<div id="GeneralVerificationCode"></div>
						</div>
					</div>
				</div>

			</div>

			<div class="form-group">
				<button type="button" id="login" class="btn btn-primary btn-block">登录</button>
			</div>
			<!-- <div class="form-group">
				<a href="">忘记密码?</a>
			</div> -->
		</form>
	</div>

	<div class="footer">

	</div>
</body>

<script>

	var isVerify = 0;

	$(function () {

		//滑动图片验证码 SlidingPictureVerificationCode
		$('#GeneralVerificationCode').slideVerify({
			type: 2, //类型
			vOffset: 5, //误差量，根据需求自行调整
			vSpace: 5, //间隔
			imgName: ['../../verifiImg/v1.jpg', '../../verifiImg/v2.jpg', '../../verifiImg/v3.png'
				, '../../verifiImg/v4.jpg', '../../verifiImg/v5.png', '../../verifiImg/v6.png'],
			imgSize: {
				width: '100%',
				height: '173px',
			},
			blockSize: {
				width: '40px',
				height: '40px',
			},
			barSize: {
				width: '100%',
				height: '50px',
			},
			ready: function () { },
			success: function () {
				isVerify = 1;
				//......后续操作
			},
			error: function () {
				//alert('验证失败！');
			}
		});
	})

	var login = function () {
		var userId = $("#userId").val();
		var password = $("#password").val();
		layui.use(['layer'], function () {

			$ = layui.$
				, layer = layui.layer
			if (userId == "" || userId == undefined) {
				layer.msg("账号未输入");
				return
			}
			if (password == "" || password == undefined) {
				layer.msg("密码未输入");
				return
			}
			if (isVerify == 0) {
				layer.msg("未进行滑动验证");
				return
			}
			showloading(true);
			$.ajax({
				url: urlapi + 'user/login',
				data: { userId: userId, password: password },
				type: "Post",
				dataType: "json",
				success: function (data) {
					showloading(false);
					if (data.code == -9999) {
						layer.msg("登陆失败,请检查账号或密码");
					} else {
						layer.msg("登陆成功");
						setTimeout(function () {
							$(location).attr('href', 'index.html');
						}, 1000);

					}
					console.log(data)
				},
				error: function () {
					showloading(false);
					layer.msg('网络异常');
				}
			});
		})
	}
	$("#login").on("click", login)


</script>

</html>